<template>
	<view>
		<u-navbar :back-text-style="{color: '#fff'}" title-color="#fff" back-icon-color="#ffffff"
			back-icon-name="arrow-leftward" title="蚂蚁链防伪溯源" :background="NavBackgroud"
			style="height:var(--status-bar-height);"></u-navbar>
		<view class="bg-img  padding-xl" style="background-image: url('/static/images/bg-02.jpg');height: 400upx;">
		</view>
		<view class="bg-white margin-lr-lg radius padding-lg solid" style="margin-top: -210rpx;">
			<view class="text-green text-xl padding-lr-xl"
				style=" text-align-last:justify;	text-align:justify;	text-justify:distribute-all-lines">蚂蚁链防伪溯源</view>
			<view class="bg-img bg-mask flex align-center radius margin-top" style="height: 280rpx;"
				:style="{backgroundImage: 'url('+image+')'}"></view>
			<view class="text-center text-brown padding text-xl">
				稻花香大米
			</view>
			<view class="solid radius padding text-xs">
				<u-row>
					<u-col span="4">品牌</u-col>
					<u-col span="8">{{storeName}}</u-col>
				</u-row>
				<u-row>
					<u-col span="4">价格</u-col>
					<u-col span="8">{{price}}</u-col>
				</u-row>
				<u-row>
					<u-col span="4">库存</u-col>
					<u-col span="8">{{stock}}</u-col>
				</u-row>
				<u-row>
					<u-col span="4">溯源链</u-col>
					<u-col span="8" style="word-wrap:break-word">蚂蚁联盟链</u-col>
				</u-row>
				<u-row>
					<u-col span="4">溯源hash</u-col>
					<u-col span="8" style="word-wrap:break-word">{{hash}}</u-col>
				</u-row>
				<u-row>
					<u-col span="4">二维码</u-col>
					<u-col span="8">
						<image :src="qr" style="height: 300rpx;"></image>
					</u-col>
				</u-row>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="margin-top flex  justify-center ">
				<button class="cu-btn lg line-blue text-black" style="width: 100%;" @click="saveQr">保存溯源二维码</button>
			</view>
			<!-- #endif -->
		</view>
		<home></home>
		<view class="padding-lg" v-if="traceInfo">
			<view class="solid radius padding shadow bg-white" v-for="(item,index) in traceInfo" :key="index"
				:class="index>0?'margin-top':''">
				<view class="bg-gradual-green radio padding-xs flex">
					<view class="text-bold">工艺:</view>
					<view class="padding-lr">{{item.itemName}}</view>
				</view>
				<view class="padding-xs solid">
					<view class="padding-xs flex solid-bottom">
						<view class="text-bold flex-sub">标识:</view>
						<view class="flex-treble solid-left padding-lr-xs">{{item.address}}</view>
					</view>
					<view class="padding-xs flex solid-bottom ">
						<view class="text-bold flex-sub">描述:</view>
						<view class="flex-treble solid-left padding-lr-xs">{{item.description}}</view>
					</view>
					<view class="padding-xs flex solid-bottom">
						<view class="text-bold flex-sub">责任人:</view>
						<view class="flex-treble solid-left padding-lr-xs">{{item.responsible}}</view>
					</view>
					<view class="padding-xs flex solid-bottom">
						<view class="text-bold flex-sub">地理位置:</view>
						<view class="flex-treble solid-left padding-lr-xs">{{item.location}}</view>
					</view>
					<view class="padding-xs flex solid-bottom">
						<view class="text-bold flex-sub">日期:</view>
						<view class="flex-treble solid-left padding-lr-xs">{{item.datestr}}</view>
					</view>
					<view class="padding-xs flex solid-bottom">
						<view class="text-bold flex-sub">HASH:</view>
						<view class="flex-treble solid-left padding-lr-xs" style="word-break:break-all;">{{item.hash}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQrTxcode
	} from '@/api/api'

	import {
		getProductTrace
	} from '@/api/store'

	import home from '@/components/home';
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index'
	export default {
		components: {
			home
		},
		data() {
			return {
				storeName: '',
				hash: '',
				image: '',
				qr: '',
				price: '',
				stock: '',
				traceInfo: null,
				canvasStatus: false, //是否显示海报
				imagePath: '', //海报路径
			}
		},
		onLoad(options) {
			console.log(options);
			this.hash = options.hash;

			if (!!this.hash) {
				this.getTraceInfo(this.hash)
			}

			this.storeName = options.storeName;
			this.image = options.image;
			this.price = options.price;
			this.stock = options.stock
			getQrTxcode({
				hash: this.hash
			}).then(res => {
				console.log(res)
				this.qr = "data:image/jpeg;base64," + res.data.qrUrl
				// this.goPoster();
			})
		},
		methods: {
			getTraceInfo(hash) {
				getProductTrace({
					hash: hash
				}).then(res => {
					if (!!res.data) {
						this.traceInfo = res.data
					}
				})
			},

			saveQr() {
				let that =this;
				uni.showLoading({
					title: '正在保存...'
				})
				base64ToPath(that.qr).then(path => {
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: function(res) {
								that.$util.Tips({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: function(res) {
								that.$util.Tips({
									title: '保存失败'
								});
							},
							complete: () => {
								uni.hideLoading();
							}
						})
					})
					.catch(error => {
						console.error(error)
						that.$util.Tips({
							title: '保存失败'
						});
						uni.hideLoading();
					})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.trace {
		// width: 690rpx;
		// background: #FFFFFF;
		// box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.07);
		// padding: 100rpx 30rpx 30rpx;

	}

	.icon-logo {
		display: block;
		width: 66rpx;
		height: 54rpx;
		margin: 0 auto;
		margin-bottom: 100rpx;
	}

	.trace-item {
		padding: 30rpx 0 20rpx;
		border-bottom: 1rpx solid #e2e2e2;
	}

	.trace-footer {
		padding: 30rpx 0 10rpx;
		text-align: center;
	}

	.hash-icon {
		height: 360rpx;
		width: 360rpx;
	}
</style>
